<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="wtxys.js" type="text/javascript"></script>
</head>

<body>
    <!-- 需求：
        1.移动端为主，pc也可用
        2.输入框：输入待办事项
        3.正在进行：可显示内容，进行修改（改为完成）、删除
        4.已经完成：显示内容，进行修改（改为未完成）、删除
        制作顺序：
        1、html
        2、css
        3、js功能

        html框架：
        main
            header
                logo+input
            doing
                title+num
                list
            done
                title+num
                list
     -->

    <div class="main">
        <div class="header">
            <div class="logo">WtTodo</div>
            <input type="text" id="input" placeholder="请输入待办事项">
        </div>
        <div class="doing todo">
            <h3>
                <span class="title">正在进行</span>
                <span class="num">0</span>
            </h3>
            <div class="list">
                <!-- <div class="todoItem">
                    <input type="checkbox">
                    <div class="content">啦啦啦</div>
                    <div class="del">删除</div>
                </div> -->
            </div>
        </div>
        <div class="done todo">
            <h3>
                <span class="title">已经完成</span>
                <span class="num">0</span>
            </h3>
            <div class="list">
                <!-- <div class="todoItem">
                <input type="checkbox"  checked="checked">
                <div class="content">啊哈哈</div>
                <div class="del">删除</div>
            </div> -->
            </div>
        </div>
    </div>

    <script type="text/javascript">
        /* 
        一.输入框添加功能
        1、创建空数组存数据
        2、通过监听输入按键事件，获取数据，并push到空数组里面
        3、创建渲染函数，添加HTML代码，把数组的数据传入，并添加在list后面，最后调用渲染函数
        二、修改功能
        1、利用onchange事件实现
        2、获取改变后的index，令isDone为True
        3.调用render重新渲染，实现状态修改
        三、删除功能
        1、利用onclick事件实现
        2、获取改变后的index，调用splice函数实现删除
        3、调用render重新渲染，实现状态删除
        */

        if (localStorage.todoList == undefined) {
            var todoList = []
        } else {
            var todoList = JSON.parse(localStorage.todoList)
        }
        var doingListDiv = document.querySelector(".doing .list");
        var doneListDiv = document.querySelector(".done .list");
        var inputDom = document.querySelector("#input");
        var mainDiv = document.querySelector(".main");

        inputDom.onkeydown = function (event) {
            if (event.key == "Enter") {
                console.log(event);
                var value = inputDom.value;
                var objItem = {
                    content: value,
                    isDone: false
                }
                todoList.push(objItem);
            };
            render(todoList);
        };
        var render = function (todoList) {
            localStorage.todoList = JSON.stringify(todoList);
            doingListDiv.innerHTML = "";
            doneListDiv.innerHTML = "";
            todoList.forEach(function (item, index) {
                var todoItem = document.createElement("div");
                todoItem.className = "todoItem";
                if (item.isDone) {
                    todoItem.innerHTML = `
        <input type="checkbox" checked="checked" data-index="${index}">
        <div class="content">`+ item.content + `</div>
        <div class="del" data-index="${index}">删除</div>`;
                    doneListDiv.appendChild(todoItem);
                } else {
                    todoItem.innerHTML = `
        <input type="checkbox" data-index="${index}">
        <div class="content">`+ item.content + `</div>
        <div class="del" data-index="${index}">删除</div>`
                    doingListDiv.appendChild(todoItem);
                }
            });
        }
        render(todoList);
        doingListDiv.onchange = function (e) {
            console.log(e)
            var index = parseInt(e.target.dataset.index);
            todoList[index].isDone = true;
            render(todoList);
        };

        doneListDiv.onchange = function (e) {
            console.log(e)
            var index = parseInt(e.target.dataset.index);
            todoList[index].isDone = false;
            render(todoList);
        };

        mainDiv.onclick = function (e) {
            if (e.target.className == "del") {
                var index = parseInt(e.target.dataset.index);
                todoList.splice(index, 1);
                render(todoList);
            }
        } 
    </script>
</body>

</html>